<template>
  <div>
    <el-card class="extra-card">
      <div
        slot="header"
        class="clearfix"
        style="display: flex; align-items: center"
      >
        <b>配血区</b>
        <div style="margin-left: auto">
          <el-button
            size="mini"
            style="float: right"
            type="success"
            @click="fillMatchRecords"
          >
            填写配血结果
          </el-button>
          <el-button
            :disabled="bloodMatchRecords.length == 0"
            size="mini"
            style="float: right; margin-right: 12px"
            type="danger"
            @click="clearMatchRecords"
          >
            清配血区
          </el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        border
        :data="bloodMatchRecords"
        :row-key="getkey"
        stripe
        style="width: 100%"
      >
        <el-table-column
          align="center"
          :reserve-selection="true"
          :selectable="selectInit"
          type="selection"
          width="40"
        />
        <el-table-column align="center" label="配血管号" prop="BLOOD_ID_UP" />
        <el-table-column
          align="center"
          label="献血者"
          prop="NAME"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="血量(U)"
          prop="BLOOD_CAPACITY"
          show-overflow-tooltip
          width="70"
        />
        <el-table-column align="center" label="血型 | RhD" prop="BLOOD_GROUP">
          <template #default="{ row }">
            {{ getAboRhd(row) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="用血时间"
          prop="TRANS_DATE"
          show-overflow-tooltip
          width="115"
        >
          <template #default="{ row }">
            {{ getDate(row.TRANS_DATE) }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="配血时间" prop="MATCH_TIME" /> -->
      </el-table>
    </el-card>
    <el-card class="extra-card">
      <div slot="header" class="clearfix">
        <b>配血试管号验证</b>
      </div>
      <el-input
        v-model="BLOOD_ID_UP"
        clearable
        placeholder="输入配血试管号"
        @input="verifyMatchBlood"
        @keyup.enter.native="keyDown('BLOOD_ID_UP', $event)"
      >
        <el-button
          slot="append"
          :loading="loading"
          style="
            height: 32px;
            margin-top: -1px;
            margin-bottom: 0;
            color: #fff;
            background: #409eff;
            border-radius: 0 4px 4px 0;
          "
          type="primary"
          @click="saveMatchRecords"
        >
          保存
        </el-button>
      </el-input>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'MatchHistory',
    props: {
      bloodMatchRecords: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        loading: false,
        submitData: {},
        BLOOD_ID_UP: '',
      }
    },
    created() {
      this.keyDown()
    },
    methods: {
      getDate(time) {
        if (time) {
          return time.substr(0, time.length - 3)
        }
        return ''
      },
      getAboRhd(row) {
        return [row.BLOOD_GROUP, row.RH].join(' | ')
      },
      getkey(row) {
        return row.temp
      },
      clearMatchRecords() {
        this.$emit('clearMatchRecords')
      },
      fillMatchRecords() {
        this.$emit('fillMatchRecords')
      },
      selectInit() {
        return false
      },
      verifyMatchBlood() {
        const index = this.bloodMatchRecords.findIndex((val) => {
          return val.BLOOD_ID_UP === this.BLOOD_ID_UP
        })

        if (index > -1) {
          this.$refs.multipleTable.toggleRowSelection(
            this.bloodMatchRecords[index],
            true
          )
          this.BLOOD_ID_UP = ''
        }
      },
      clearMultipleTable() {
        this.bloodMatchRecords.forEach((item) => {
          this.$refs.multipleTable.toggleRowSelection(item, false)
        })
      },
      saveMatchRecords() {
        this.loading = true
        this.submitData.matchRecords = this.$refs.multipleTable.selection
        this.$emit('saveMatchRecords', this.submitData)
      },
      resetBtn() {
        this.loading = false
      },
      keyDown(name, e) {
        //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
        if (name === 'BLOOD_ID_UP' && e.keyCode === 13) {
          //回车后执行搜索方法
          if (!this.loading && this.bloodMatchRecords.length > 0) {
            this.saveMatchRecords()
          }
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
